<template>
    <div class="container">
        <my-search :fields="fieldsList" :baseNumber="4" @onSearch="searchForm" @onReset="resetForm" />
        <div class="btn">
            <el-button type="info" plain size="mini" @click="go('add')">新增</el-button>
            <el-button type="info" plain size="mini" @click="del()">删除</el-button>

        </div>
        <div class="table-list">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 210" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="true" @onSelectionChange="onSelectionChange" />
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryList, deleteMonitorTask, shutdown, start } from '@/api/znjk/znjk'

export default {
    name: 'zznjk-list',

    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '任务名称:',
                    field: 'task_name',
                    type: 'text',
                    value: '',

                },

                {
                    label: '创建日期',
                    field: 'date',
                    type: 'daterange', // daterange
                    value: [],
                    options: [
                        {
                            field: 'cjsjq',
                            value: ''
                        },
                        {
                            field: 'cjsjz',
                            value: ''
                        }
                    ],
                    change: value => {
                        // this.changxm(value);
                    }
                },


            ],
            //右侧表格开始
            tableColumns: [
                {
                    label: '任务名称',
                    prop: 'task_name',
                    align: 'center',
                    minWidth: 120,

                },
                {
                    label: '创建日期',
                    prop: 'create_time',
                    align: 'center',
                    minWidth: 100,
                },
                {
                    label: '创建人',
                    prop: 'create_by',
                    align: 'center',
                    minWidth: 80,

                },


                {
                    label: '执行结果',
                    prop: 'last_status',
                    align: 'center',
                    minWidth: 80,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        if (params.row.last_status == '09') {
                            return (
                                <span class="undertxtRed" onClick={() => this.go('result', params.row)}>
                                    失败
                                </span>
                            );
                        } else if (params.row.last_status == '00') {
                            return (<span class="undertxtBlue" onClick={() => this.go('result', params.row)}>
                                成功
                            </span>
                            )
                        }

                    }
                },
                {
                    label: '执行开始时间',
                    prop: 'execute_time',
                    align: 'center',
                    minWidth: 160,
                },
                {
                    label: '执行完成时间',
                    prop: 'complete_time',
                    align: 'center',
                    minWidth: 160,
                },
                {
                    label: '执行记录',
                    prop: 'exe_times',
                    align: 'center',
                    minWidth: 100,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        if (params.row.exe_times != 0) {
                            return (
                                <span class="undertxtBlue" onClick={() => this.go('zxjl', params.row)}>
                                    {params.row.exe_times}
                                </span>
                            );
                        } else {
                            return (
                                <span  >
                                    {params.row.exe_times}
                                </span>
                            );
                        }


                    }
                },

                {
                    label: '操作',
                    prop: 'caozuo',
                    align: 'center',
                    width: 150,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        return (
                            <span>

                                <el-button type="text" onClick={() => this.editStates(params.row)}>{params.row.task_status == "Y" ? '停止' : '启动'}</el-button>
                                <el-button type="text" onClick={() => this.go('edit', params.row)}>编辑</el-button>
                                <el-button type="text" onClick={() => this.del(params.row)}>删除</el-button>
                            </span>
                        );
                    }
                }




            ],
            tableDatas: [

            ]
            , queryObj: {
                task_name: '', //人民名称
                cjsjq: '',
                cjsjz: '',
                date: [],
                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            selectedRows: [],

        }
    },
    computed: {
        ...mapGetters([
            'name'
        ])
    },
    mounted() {
          this.getTableData();
          localStorage.removeItem('addForm')
           localStorage.removeItem('rwform')
    },
    methods: {

        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.task_name = params.zbmc || '';
            this.queryObj.cjsjq = params.cjsjq || '';
            this.queryObj.cjsjz = params.cjsjz || '';
            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.getTableData();
        },
        getTableData() {
            this.loading = true;
            let params = {
                zbmc: this.queryObj.zbmc,
                rwmc: this.queryObj.rwmc,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
                 yxbz: 'Y'
            }
            queryList(params).then(res => {
                console.log(res)
                this.loading = false;
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
        },
        del(params) {
            if (params) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    // let ids = []
                    // this.selectedRows.forEach(item => {
                    //     ids.push(item.task_id)
                    // })
                    deleteMonitorTask(params.task_id).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })
            } else if (this.selectedRows.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let ids = []
                    this.selectedRows.forEach(item => {
                        ids.push(item.task_id)
                    })
                    deleteMonitorTask(ids.join(',')).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }
        },
        editStates(row) {
            this.loading = true
            if (row.task_status == 'Y') {
                shutdown({ id: row.task_id }).then(res => {
                    this.loading = false
                    if (res.code == 200) {
                        this.$message.success('停止成功')
                        this.getTableData()
                    } else {
                        this.$message.error('停止失败')
                    }
                })
            } else if (row.task_status == 'N') {
                start({ id: row.task_id }).then(res => {
                    this.loading = false
                    if (res.code == 200) {
                        this.$message.success('启动成功')
                         this.getTableData()
                    } else {
                        this.$message.error('启动失败')
                    }
                })
            }



        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },



    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    // padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    ::v-deep .undertxt {
        color: rgb(64, 158, 255);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    ::v-deep .undertxtRed {
        color: rgb(217, 0, 27);
        cursor: pointer;
        text-decoration: underline;
        &:hover {
        }
    }
    ::v-deep .undertxtBlue {
        color: #0000ff;
        cursor: pointer;
        text-decoration: underline;
        &:hover {
        }
    }
}
::v-deep .el-date-editor {
    width: 220px;
}
</style>
